<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
		<title>首页</title>
		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/comment.css" rel="stylesheet" />
		<link href="css/main.css" rel="stylesheet" />
		<style type="text/css">
			.amap-icon img,
			.amap-marker-content img {
				width: 45px;
				height: 45px;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav gradient">
			<div style="height: 20px;"></div>
			<h1 class="mui-title">首页</h1>
			<div class="mui-pull-right warnInfo">
				<span class="mui-badge mui-badge-danger">0</span>
			</div>
		</header>
		<div id="container">
			<div class="map_list">
				<div class="up">
					<div class="map_list_item">
						<div>
							<div class="num"><span class="normal">10</span></div>
							<div class="title">在线</div>
						</div>
						<div>
							<div class="num"><span class="error">0</span></div>
							<div class="title">离线</div>
						</div>
						<div style="border-left: 2px solid #e5e5e5;">
							<div class="num"><span class="normal">9</span></div>
							<div class="title">正常</div>
						</div>
						<div>
							<div class="num"><span class="error">1</span></div>
							<div class="title">故障</div>
						</div>
					</div>
				</div>
			</div>
			<div style="text-align: right;padding-right: 0.3rem;padding-top: 10px;">
				<div class="nav_img"></div>
			</div>
			<div class="map_equiment">
				<div class="map_equiment_list">
					<!-- <div class="map_equiment_listItem">
						<div class="eq_img">
							<input type="hidden" class="eqDe_proid" value="1" />
							<span class="eqDe_btn" data-href="equipment_chart.html">流程工艺</span>
							<span class="eqDe_btn" data-href="equipment_history.html">历史数据</span>
							<span class="eqDe_btn" data-href="equipment_now.html">实时数据</span>
							<span class="eqDe_btn" data-href="equipment_parameter.html">参数设置</span>
							<div class="eqDe_btn mui-icon mui-icon-arrowright"></div>
						</div>
						<div class="eq_info">
							<div class="item">
								<div class="clearfix">
									<span class="title fl">设备型号：</span>
									<span class="fr" style="color: black;">JQ_1234</span>
								</div>
								<div class="clearfix">
									<span class="title fl">在线状态：</span>
									<span class="normal fr">在线</span>
								</div>
							</div>
							<div class="item">
								<div class="clearfix">
									<span class="title fl">设备状态：</span>
									<span class="normal fr">正常</span>
								</div>
								<div class="clearfix">
									<span class="title fl">设备描述：</span>
									<span class="fr">正常</span>
								</div>
							</div>
						</div>
					</div> -->

				</div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery.js"></script>
		<script src="js/rem.js"></script>
		<script src="https://webapi.amap.com/maps?v=2.0&key=c8e40dec3ddfd4e14ea0fbd2f297517f&plugin=AMap.DistrictSearch"></script>
		<script type="text/javascript">
			var _url = "http://112.54.80.235:8038";
			mui.init();
			mui.ready(function() {
				//竖屏
				plus.screen.unlockOrientation();
				plus.screen.lockOrientation("portrait-primary");
				//自定义--竖屏
				window.addEventListener('screen', function(event) {
					console.log("main竖屏");
					plus.screen.unlockOrientation();
					plus.screen.lockOrientation("portrait-primary")
				});
				//绑定数据
				$.ajax({
					type: 'get',
					url: _url + '/actionapi/Users/SJGetSheBei',
					dataType: 'json',
					data: {
						DevNo: "0"
					},
					success: function(data) {
						//console.log(JSON.stringify(data.data));
						localStorage.setItem("eqInfo", JSON.stringify(data.data))
						var data = data.data;
						var html = '';
						for (var i = 0; i < data.length; i++) {
							html += '<div class="map_equiment_listItem"><div class="eq_img">';
							html += '<span class="eqDe_btn eqDe_btn_click" data-id="' + data[i].Id + '" data-DeviceNO="' + data[i].DeviceNO +
								'" data-href="eqChart.html">流程工艺</span>';
							html += '<span class="eqDe_btn eqDe_btn_href" data-id="' + data[i].DeviceNO +
								'" data-href="dataHistory.html">数据管理</span>';
							html += '<span class="eqDe_btn eqDe_btn_href" data-id="' + data[i].DeviceNO +
								'" data-href="alarmMessage.html">报警信息</span>';
							html += '<span class="eqDe_btn eqDe_btn_href" data-id="' + data[i].DeviceNO +
								'" data-href="eqSet.html">设备参数</span>';
							html += '<div class="eq_href mui-icon mui-icon-arrowright" data-id="' + data[i].DeviceNO + '"></div>'
							html += '</div><div class="eq_info">';
							html += '<div class="item"><div class="clearfix">';
							html += '<span class="title fl">设备名称：</span>';
							html += '<span class="fr" style="color: black;">' + data[i].DeviceName + '</span>';
							html += '</div><div class="clearfix">';
							html += '<span class="title fl">在线状态：</span><span class="normal fr">在线</span>';
							html += '</div></div><div class="item"><div class="clearfix">';
							html += '<span class="title fl">安装地点：</span><span class="fr">' + data[i].InstallAddress + '</span>';
							html += '</div><div class="clearfix">';
							html += '<span class="title fl">设备分类：</span><span class="fr">' + data[i].Classification + '</span>';
							html += '</div></div></div></div>';
						}
						$('.map_equiment_list').html(html);
						if (data.length > 3) {
							$('.map_equiment').css("bottom", "10px")
						}
					},
					error: function(XMLHttpRequest, textStatus, errorThrown) {
						plus.nativeUI.alert("SJGetSheBei接口有误", function(e) {
							//console.log(e.index);
						}, "信息提示", '确定');
					}
				})
				//收起展开设备列表
				$(document).on('tap', '.nav_img', function() {
					if ($(this).hasClass('down')) {
						//收起
						$(this).removeClass('down');
						$('.map_equiment .map_equiment_list').hide();
					} else {
						//展开
						$(this).addClass('down');
						$('.map_equiment .map_equiment_list').show();
						//关闭单个窗口
						//$('.eq_one').hide();
					}
				});
				//eq_href,待机进入单个设备
				$(document).on("tap", '.eq_href', function() {
					var proid = $(this).attr("data-id");
					// mui.openWindow({
					// 	url: 'equipmentOther.html',
					// 	id: 'equipmentOther.html',
					// 	extras: {
					// 		proid: proid
					// 	},
					// 	waiting: {
					// 		autoShow: true, //自动显示等待框，默认为true
					// 		title: '正在加载...', //等待对话框上显示的提示内容
					// 	}
					// });
					var self = plus.webview.currentWebview();
					var opener = self.opener();
					//此句调用父页面js
					opener.evalJS('equi("' + proid + '")');
				});
				//4个按钮链接,打开页面
				$(document).on('tap', '.eqDe_btn_href', function() {
					var href = $(this).attr("data-href");
					//获取设备id
					var proid = $(this).attr("data-id");
					mui.openWindow({
						url: href,
						id: href,
						extras: {
							proid: proid
						},
						waiting: {
							autoShow: true, //自动显示等待框，默认为true
							title: '正在加载...', //等待对话框上显示的提示内容
						}
					})
				});
				//工艺流程图点击
				$(document).on('tap', '.eqDe_btn_click', function() {
					var href = "";
					//获取设备id
					var DeviceNO = String($(this).attr("data-DeviceNO"));
					var proid = String($(this).attr("data-id"));
					switch (proid) {
						case "0":
							//热洗撬
							href = "eqChart.html";
							break;
						case "1":
							//热洗撬
							href = "eqChart2.html";
							break;
						case "2":
							//气浮撬
							href = "eqChart1.html";
							break;
						case "3":
							//加药供水撬
							href = "eqChart3.html";
							break;
						case "4":
							//振动筛分撬
							href = "eqChart4.html";
							break;
						case "5":
							//压滤机
							href = "eqChart5.html";
							break;
					}
					localStorage.setItem("backInfo", "true");
					mui.openWindow({
						url: href,
						id: href,
						extras: {
							proid: DeviceNO
						},
						waiting: {
							autoShow: true, //自动显示等待框，默认为true
							title: '正在加载...', //等待对话框上显示的提示内容
						}
					});
					//横屏
					var main = plus.webview.getWebviewById(href);
					mui.fire(main, 'screen')
				});
				//报警按钮
				$('.warnInfo').click(function() {
					mui.openWindow({
						url: "alarmMessage.html",
						id: "alarmMessage.html",
						waiting: {
							autoShow: true, //自动显示等待框，默认为true
							title: '正在加载...', //等待对话框上显示的提示内容
						}
					})
				});
			});
			$.ajax({
				type: 'get',
				url: _url + '/actionapi/Users/SJGetSheBei',
				dataType: 'json',
				data: {
					DevNo: "0"
				},
				success: function(data) {
					var data = data.data;
					var address = []
					for (var i = 0; i < data.length; i++) {
						address.push(data[i].InstallAddress)
					}
					address = unique(address);
					creatMap(address.length, address)
				},
				error: function(XMLHttpRequest, textStatus, errorThrown) {
					console.log("err " + errorThrown);
				}
			});
			//数组去重
			function unique(arr) {
				return Array.from(new Set(arr))
			}
			// 创建地图实例
			function creatMap(num, obj) {
				// 创建地图实例
				var map = new AMap.Map("container", {
					zoom: 12,
					center: [116.4, 39.92],
					resizeEnable: true
				});
				var viaMarker = new AMap.Marker({
					position: new AMap.LngLat(116.4, 39.92),
					// 将一张图片的地址设置为 icon
					icon: 'images/map.png',
					// 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
					offset: new AMap.Pixel(-13, -30)
				});
				map.add(viaMarker)
				viaMarker.on("click", function() {
					showInfoM()
				})
			};
			//地图点点击
			function showInfoM() {
				// console.log(e.target.content);
				//绑定数据
				//getShe(e.target.content)
				//收起
				$('.nav_img').addClass('down');
				$('.map_equiment .map_equiment_list').show();

			};
			//点击地图绑定设备信息
			function getShe(addre) {
				//绑定数据
				$.ajax({
					type: 'get',
					url: _url + '/actionapi/Users/SJGetSheBei',
					dataType: 'json',
					data: {
						DevNo: "0"
					},
					success: function(data) {
						//console.log(JSON.stringify(data.data));
						var data = data.data;
						var html = '';
						for (var i = 0; i < data.length; i++) {
							if (data[i].InstallAddress == addre) {
								html += '<div class="map_equiment_listItem"><div class="eq_img">';
								html += '<span class="eqDe_btn" data-id="' + data[i].DeviceNO +
									'" data-href="eqChart.html">流程工艺</span>';
								html += '<span class="eqDe_btn" data-id="' + data[i].DeviceNO +
									'" data-href="dataHistory.html">数据管理</span>';
								html += '<span class="eqDe_btn" data-id="' + data[i].DeviceNO +
									'" data-href="alarmMessage.html">报警信息</span>';
								html += '<span class="eqDe_btn" data-id="' + data[i].DeviceNO +
									'" data-href="eqSet.html">设备参数</span>';
								html += '<div class="eq_href mui-icon mui-icon-arrowright" data-id="' + data[i].DeviceNO + '"></div>'
								html += '</div><div class="eq_info">';
								html += '<div class="item"><div class="clearfix">';
								html += '<span class="title fl">设备名称：</span>';
								html += '<span class="fr" style="color: black;">' + data[i].DeviceName + '</span>';
								html += '</div><div class="clearfix">';
								html += '<span class="title fl">在线状态：</span><span class="normal fr">在线</span>';
								html += '</div></div><div class="item"><div class="clearfix">';
								html += '<span class="title fl">安装地址：</span><span class="fr">' + data[i].InstallAddress +
									'</span>';
								html += '</div><div class="clearfix">';
								html += '<span class="title fl">设备分类：</span><span class="fr">' + data[i].Classification + '</span>';
								html += '</div></div></div></div>';
							}
						}
						$('.map_equiment_list').html(html);
						if ($('.map_equiment_listItem').length < 3) {
							$(".map_equiment").removeAttr("style")
						}
					},
					error: function(XMLHttpRequest, textStatus, errorThrown) {
						console.log("err " + errorThrown);
					}
				})
			}
		</script>
	</body>
</html>
